@import "../../_common_sass/base";

.activity-list-detail {
    background-color: $body-background;
    padding-bottom: px2rem(128px);
    .banner-box {
        width: 100%;
        height: px2rem(400px);
        overflow: hidden;
        .banner {
            width: 100%;
        }
    }
    .act-info {
        .act-row {
            padding: px2rem(30px);
            border-bottom: 1px solid $light-border-color;
        }
        .act-head {
            background-color: #fff;
            border-top: 1px solid $light-border-color;

            h5 {
                min-height: px2rem(54px);
                font-size: px2rem(36px);
                margin-bottom: px2rem(20px);
            }
            .label {
                min-height: px2rem(44px);
                margin-bottom: px2rem(10px);
                span {
                    display: inline-block;
                    padding: 0 px2rem(10px);
                    margin-right: px2rem(10px);
                    margin-bottom: px2rem(10px);
                    border: 1px solid $darkBlue;
                    border-radius: 4px;
                    color: #fff;
                    line-height: px2rem(44px);
                    &:before {
                        content: '';
                        position: absolute;
                        top: px2rem(18px);
                        left: px2rem(13px);
                        width: px2rem(8px);
                        height: px2rem(8px);
                        border-radius: 50%;
                        background-color: #fff;
                    }
                }
            }
            /*            .act-intro {
                            position: relative;
                            font-size: 12px;
                            line-height: 18px;
                            color: $text-color-6;
                            max-height: 36px;
                            overflow: hidden;
                            &.more{
                                max-height: none;
                            }
                            span {
                                position: absolute;
                                height: 18px;
                                right: 0;
                                bottom: 0;
                                text-align: center;
                                color: $darkBlue;
                                line-height: px2rem(35px);
                                &:before{
                                    content: '';
                                    height: 18px;
                                    display: inline-block;
                                    width: 100px;
                                    background: linear-gradient(90deg,transparent, #fff);
                                }
                                em{
                                    float: right;
                                    height: 18px;
                                    background-color: #fff;
                                }
                            }
                        }*/
        }
        .act-body {
            background-color: #fff;
            li {
                margin-bottom: px2rem(10px);
                font-size: px2rem(28px);
                .label {
                    display: inline-block;
                    width: px2rem(140px);
                    vertical-align: top;
                    color: $text-color-9;
                }
                .txt {
                    display: inline-block;
                    width: px2rem(540px);
                    color: $text-color-6;
                }
            }
        }
        .status1001,
        .status1002,
        .status1003,
        .status1004 {
            position: relative;
            &:before {
                content: ' ';
                position: absolute;
                top: px2rem(-30px);
                right: px2rem(20px);
                width: px2rem(157px);
                height: px2rem(132px);
                z-index: 1;
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
        .status1001:before {
            background-image: url(../../_common_img/activityStatus/status-apply.png);
        }
        .status1002:before {
            background-image: url(../../_common_img/activityStatus/status-full.png);
        }
        .status1003:before {
            background-image: url(../../_common_img/activityStatus/status-end.png);
        }
        .status1004:before {
            background-image: url(../../_common_img/activityStatus/status-cancel.png);
        }
        .act-master {
            @extend .clearfix;
            display: block;
            background-color: #fff;
            border-top: 1px solid $light-border-color;
            .avatar-box {
                float: left;
                img {
                    width: px2rem(50px);
                    height: px2rem(50px);
                }
            }
            .master-info {
                float: left;
                width: px2rem(550px);
                line-height: px2rem(50px);

                h5 {
                    font-size: px2rem(28px);
                    @extend .clearfix;
                    span {
                        float: left;
                        display: inline-block;
                        max-width: px2rem(400px);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .icon-master {
                        float: left;
                        @include label($height: 36px, $o: 4px);
                        background-color: $yellow;
                        font-size: px2rem(20px);
                        margin-left: .1rem;
                        margin-top: .09rem;
                    }
                }

                p {
                    margin-top: px2rem(10px);
                    width: px2rem(428px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: $text-color-6;
                }
            }
            .arrow {
                margin-top: .1rem;
                float: right;
                @extend .icon-arrow;

            }
            .icon-follow {
                @extend .icon;
                float: right;
                width: .62rem;
                height: .8rem;
                background-image: url(../../../containers/_common_img/sponsor/follow.png);
                &.followed {
                    background-image: url(../../../containers/_common_img/sponsor/followed.png);
                }
            }
        }
        .act-apply {
            position: relative;
            background-color: #fff;
            border-top: 1px solid $light-border-color;
            .join-btn {
                position: absolute;
                top: px2rem(15px);
                right: px2rem(30px);
                @include button($height: px2rem(57px), $width: px2rem(233px), $backgroundColor: #fff);
                border: 1px solid $blue;
                color: $blue;
                font-size: px2rem(24px);
            }
            .disabled-btn {
                position: absolute;
                top: px2rem(15px);
                right: px2rem(30px);
                @include button($height: px2rem(57px), $width: px2rem(150px), $backgroundColor: #fff);
                border: 1px solid #ccc;
                color: #ccc;
                font-size: px2rem(24px);
                .icon-finish{
                    @extend .icon;
                    vertical-align: top;
                    margin: px2rem(15px) px2rem(10px) 0 0;
                    width: px2rem(24px);
                    height: px2rem(24px);
                    background-image: url(../../_common_img/activeDetail/icon-finish.png);
                }
            }
            h5 {
                margin-bottom: px2rem(20px);
                padding-left: px2rem(10px);
                border-left: px2rem(6px) solid $blue;
                font-size: px2rem(30px);
                line-height: px2rem(34px);
            }
            .vol-list {
                display: block;
                padding: px2rem(20px) 0 0;
                img {
                    width: px2rem(50px);
                    height: px2rem(50px);
                    border-radius: 50%;
                    line-height: px2rem(50px);
                    margin-right: px2rem(10px);
                }
                i {
                    float: right;
                    margin-top: px2rem(5px);
                    @extend .icon-arrow;
                }
            }
            .sub-title {
                margin-top: px2rem(30px);
                border-top: 1px solid $light-border-color;
                line-height: px2rem(60px);
            }
        }
    }
    .control-bar {
        position: fixed;
        overflow: hidden;
        bottom: 0;
        width: 100%;
        height: px2rem(98px);
        border-top: 1px solid $light-border-color;
        background-color: #e5e5e5;
        line-height: px2rem(98px);
        .join-able {
            text-align: center;
            .price-box {
                float: left;
                width: px2rem(500px);
                padding-left: px2rem(30px);
                background-color: #fff;
                text-align: left;
                font-size: px2rem(24px);
                em {
                    font-size: px2rem(36px);
                }
            }
            .join {
                float: left;
                width: px2rem(250px);
                background-color: $orange;
                font-size: px2rem(36px);
                color: #fff;
            }
        }
        .join-wait {
            display: flex;
            align-items: center;
            justify-content: center;
            .icon-time{
                @extend .icon;
                margin-right: px2rem(10px);
                width: px2rem(38px);
                height: px2rem(38px);
                background-image: url(../../_common_img/activeDetail/icon-time.png);
            }
            background-color: $orange;
            font-size: px2rem(36px);
            text-align: center;
            color: #fff;
        }
        .join-success {
            background-color: $blue;
            font-size: px2rem(36px);
            text-align: center;
            color: #fff;
        }
        .join-disable {
            font-size: px2rem(36px);
            text-align: center;
            color: $text-color-9;
        }

    }

}

.act-intro,
.vol-intro {
    position: relative;
    font-size: 12px;
    line-height: 18px;
    color: $text-color-6;
    max-height: 36px;
    overflow: hidden;
    word-break: break-all;
    &.more {
        max-height: none;
    }
    span {
        position: absolute;
        height: 18px;
        right: 0;
        bottom: 0;
        text-align: center;
        color: $darkBlue;
        &:before {
            content: '';
            height: 18px;
            display: inline-block;
            width: 50px;
            //background: linear-gradient(to right, transparent 0%, #fff 100%);
            background: url(../../_common_img/icon/more_hide.png);
            background-size: cover;
        }
        em {
            float: right;
            height: 18px;
            background-color: #fff;
        }
    }
}